<template>
  <div class="user_list-page flexC">
    <div class="user_list-page flexC" style="margin-bottom: 20px;">
      <div class="pageHead flexC">
        <p>环境查询</p>
      </div>
      <div class="pageHead flexC">
        <Form ref="searchForm" :model="searchForm" inline :label-width="80">
          <FormItem label="环境名称" prop="name">
            <Input
                type="text"
                v-model="searchForm.name"
                placeholder="请输入环境名称"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="环境状态" prop="is_active">
            <Select
                v-model="searchForm.is_active"
                placeholder="请选择"
                clearable
                style="width: 200px"
            >
              <Option :value= 1>启用</Option>
              <Option :value= 0>禁用</Option>
            </Select>
          </FormItem>

          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search" style="
             margin-right: 10px;"
            >搜索
            </Button>
            <Button @click="handleReset('searchForm')">重置</Button>
          </FormItem>
        </Form>
      </div>
    </div>


    <div class="pageHead flexC" style="padding-left: 0px;">
      <div class="pageHead flexC">
<!--        创建环境-->
        <div style="display: flex;justify-content: space-between">
          <p>环境列表</p>
          <Button type="primary" size="small" @click="modal1 = true">创建环境</Button>
          <Modal
              width="950"
              v-model="modal1"
              title="创建环境">
            <Tabs value="name1">
              <TabPane label="基础信息" name="name1">
                <Form ref="crenvs" :model="crenvs" :rules="ruleValidate">
              <div>
                <FormItem label="环境名称" prop="name">
                  <Input
                      type="text"
                      v-model="crenvs.name"
                      clearable
                      style="width: 800px"
                  />
                </FormItem>
              </div>
              <div>
                <FormItem label="环境地址" prop="url">
                  <Input
                      type="text"
                      v-model="crenvs.url"
                      placeholder="格式：域名(或IP):端口号"
                      clearable
                      style="width: 800px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="是否启用" prop="isactive">
                <RadioGroup v-model="crenvs.isactive" type="button" button-style="default" size="small">
                    <Radio :label=1 type="true">启用</Radio>
                    <Radio :label=0 type="false" >禁用</Radio>
                </RadioGroup>
                  </FormItem>
              </div>

              <div>
                <FormItem label="备注" style="margin-left: 38px;">
                  <Input
                      type="textarea"
                      v-model="crenvs.desc"
                      :rows = "5"
                      style="width: 800px"
                  />
                </FormItem>
              </div>
            </Form>
              </TabPane>

              <TabPane label="全局参数配置" name="name2">
                  <vue-json-editor
                      style="height: 350px;width: 900px;margin-top: 5px;"
                      v-model="crenvs.param"
                      :showBtns="false"
                      :mode="'code'"
                      lang="zh"
                  />
              </TabPane>
            </Tabs>

             <div slot="footer">
              <Button @click="cancel">取消</Button>
             <Button @click="sure('crenvs')" type="primary">确定</Button>
            </div>
          </Modal>
        </div>


<!--        编辑环境-->
        <div style="display: flex;justify-content: space-between">
          <Modal
              width="950"
              v-model="modal2"
              title="编辑环境">
            <Tabs value="name3">
              <TabPane label="基础信息" name="name3">
                <Form ref="crenvs2" :model="crenvs2" :rules="ruleValidate2">
              <div>
                <FormItem label="环境名称" prop="name">
                  <Input
                      type="text"
                      v-model="crenvs2.name"
                      clearable
                      style="width: 800px"
                  />
                </FormItem>
              </div>
              <div>
                <FormItem label="环境地址" prop="url">
                  <Input
                      type="text"
                      v-model="crenvs2.url"
                      placeholder="格式：域名(或IP):端口号"
                      clearable
                      style="width: 800px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="是否启用" prop="isactive">
                    <RadioGroup v-model="crenvs2.isactive ? 1 : 0" type="button" button-style="default" size="small">
                      <Radio :label=1 type="true">启用</Radio>
                      <Radio :label=0 type="false" >禁用</Radio>
                    </RadioGroup>
                </FormItem>
              </div>

              <div>
                <FormItem label="备注" style="margin-left: 38px;">
                  <Input
                      type="textarea"
                      v-model="crenvs2.desc"
                      :rows="5"
                      style="width: 800px"
                  />
                </FormItem>
              </div>
            </Form>
              </TabPane>

               <TabPane label="全局参数配置" name="name2">
                  <vue-json-editor
                      style="height: 350px;width: 900px;margin-top: 5px;"
                      v-model="crenvs2.param"
                      :showBtns="false"
                      :mode="'code'"
                      lang="zh"
                  />
              </TabPane>
            </Tabs>

             <div slot="footer">
              <Button @click="cancel2">取消</Button>
             <Button @click="sure2('crenvs2')" type="primary">确定</Button>
            </div>
          </Modal>
        </div>

      </div>

      <div class="pageContent flexC">
        <Table
            border
            :columns="columns"
            :data="data"
            sortable="custom"
            ref="table"
            size="small"
        ></Table>
      <div>
        <Page
                :total="page.total"
                :page-size= "page.size"
                :current="page.index"
                show-total
                show-elevator
                show-sizer
                @on-change="changeSize"
                @on-page-size-change="changePage"
                style="margin-top: 20px;"

          />
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {envlist,  envupdate, envdelete, envcreate, envsupdate, test_reports} from '../../api/api'
import vueJsonEditor from "vue-json-editor";


export default {
  name: "envs_list",
  components: {vueJsonEditor},
  modal_loading:false,
  data() {
    return {
      page:{
        index:1,
        size:10,
        total:50
      },
      envsid: '',
      crenvs:{
        name:'',
        url:'',
        isactive:1,
        desc:'',
        param:{}
      },
      crenvs2:{
        name:'',
        url:'',
        isactive:1,
        desc:'',
        param:{}
      },
      modal1: false,
      modal2:false,
      data: [],
      enterTitle: '',
      searchForm: {
        name: '',
        is_active:null
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "环境名称",
          key: "name",
          align: "center",
          minWidth: 125,
          width: 300,
          sortable: true,
        },
        {
          title: "环境地址",
          align: "center",
          key: "base_url",
          minWidth: 125,
          sortable: true,
        },
        {
          title: "描述",
          key: "desc",
          align: "center",
          width: 150,
          minWidth: 120,
          render :(h,params) => {
            return h('div' , params.row.desc || '-')
              }

        },
        {
          title: "创建时间",
          key: "create_time",
          align: "center",
          sortable: true,
          width: 180,
        },

        {
          title: "状态",
          key: "is_active",
          align: "center",
          fixed: "right",
          width: 100,
          render: (h, params) => {
            if (params.row.is_active == 1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "启用",
                  },
                }),
              ]);
            } else if (params.row.is_active == 0) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "禁用",
                  },
                }),
              ]);
            }
          },
          filters: [
            {
              label: "启用",
              value: 0,
            },
            {
              label: "禁用",
              value: -1,
            },
          ],
          filterMultiple: false,
          filterRemote: (e) => {
            let v = "";
            if (e.length > 0) {
              v = e[0];
            }
            this.searchForm.status = v;
            this.searchForm.pageNumber = 1;
            this.getDataList();
          },
        },


        {
          title: "操作",
          key: "action",
          width: 170,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            if (params.row.is_active == true) {
              enableOrDisable = h(
                  "a",
                  {
                    style: {
                      color: '#FF9900'
                    },
                    on: {
                      click: () => {
                        this.disable(params.row);
                      },
                    },
                  },
                  "禁用"
              );
            } else {
              enableOrDisable = h(
                  "a",
                  {
                    style: {
                      color: '#19B16B'
                    },
                    on: {
                      click: () => {
                        this.enable(params.row);
                      },
                    },
                  },
                  "启用"
              );
            }
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit('crenvs2', params.row);
                      },
                    },
                  },
                  "编辑"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h('Poptip', {
                style: {
                  color: '#ED4014'
                },
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'left-end',
                  title: '确定要删除吗！',
                  type: 'error',
                  size: 'small',
                },
                on: {
                  'on-ok': () => {
                    this.remove(params.row);
                  }
                }
              }, '删除')
            ]);

          },
        },
      ],
      ruleValidate: {
        name: [
          {required: true, message: '请输入环境名称', trigger: 'blur,change'}
        ],
        url: [
          {required: true, message: '请输入环境地址', trigger: 'blur,change'},
        ],
        // isactive: [
        //   {required: true, message: '请选择环境状态', trigger: 'blur,change',},
        // ],
      },
      ruleValidate2: {
        name: [
          {required: true, message: '请输入环境名称', trigger: 'blur,change'}
        ],
        url: [
          {required: true, message: '请输入环境地址', trigger: 'blur,change'},
        ],
        // isactive: [
        //   {required: true, message: '请选择环境状态', trigger: 'blur,change',},
        // ],
      }
    }
  },
  created() {
    this.getlist();
  },
  mounted() {
  },
  computed: {},
  methods: {
    getlist() {
      let data = {
        'size':this.page.size,
        'page':this.page.index
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count
      })
    },

    handleSearch() {
      let data = {
        'name':this.searchForm.name,
        'is_active': this.searchForm.is_active === 1 ? true : false,
      }
      envlist(data).then(res => {
        const data = res.data.data
        this.data = data
      })
    },

    handleReset(name) {
      this.getlist()
      this.$refs[name].resetFields();
    },

    disable(v) {
      v.is_active = false
      envupdate(v, v.id).then(res => {
        this.$Message.success("禁用成功！");
      })
    },

    enable(v) {
      v.is_active = true
      envupdate(v, v.id).then(res => {
        this.$Message.success("启用成功！");
      })
    },


    remove(v) {
      envdelete(v.id).then(res => {
        this.$Message.success("删除成功！");
        this.getlist()
      })
    },

    cancel() {
      this.modal1=false
    },

    cancel2() {
      this.modal2=false
    },

    sure(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const datas = {
            'name':this.crenvs.name,
            'base_url': this.crenvs.url,
            'is_active':this.crenvs.isactive ===1,
            'desc':this.crenvs.desc,
            'param': JSON.stringify(this.crenvs.param)
            }
            envcreate(datas).then(res => {
              this.getlist()
              this.modal1=false
              this.$Message.success('添加环境成功!');
            })
              }
          })
      },

    edit(name,v) {
      this.modal2=true
      this.envsid = v.id
      this.crenvs2.name = v.name
      this.crenvs2.url = v.base_url
      this.crenvs2.isactive = v.is_active
      this.crenvs2.desc = v.desc
      this.crenvs2.param = JSON.parse(v.param)
    },

    sure2(name) {
      const datas = {
          'name':this.crenvs2.name,
          'base_url': this.crenvs2.url,
          'is_active':this.crenvs2.isactive,
          'desc':this.crenvs2.desc,
          'param': JSON.stringify(this.crenvs2.param)
            }
      this.$refs[name].validate((valid) => {
        if (valid) {
          envsupdate(this.envsid,datas).then(res => {
            this.getlist()
            this.modal2=false
            this.$Message.success('修改环境成功!');
          })
        }
    })
    },

    changeSize(e) {
      let data = {
        'size':this.page.size,
        'page':e
      }
      envlist(data).then(res =>{
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count

      })
    },
    changePage(e){
      let data = {
        'size':e,
        'page':this.page.index
      }
      envlist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count
      })
    }
  },
  watch: {},
  filters: {}
}
</script>

<style lang="less">
.jsoneditor-vue {
  height: 100%;
}
.user_list-page {
  .pageContent {
    & > ul {
      & > li {
        border-bottom: 1px solid #e8eaec;
        padding: 12px 0;

        & > div:first-child {
          margin-bottom: 16px;

          & > span:first-child {
            margin-right: 16px;
          }

          & > span:last-child {
            color: rgba(0, 0, 0, .85);
            font-size: 16px;
          }
        }

        & > div:nth-child(3) {
          margin-top: 8px;

          & > span:nth-child(1) {
            margin: 2px 4px 2px 0;
            padding: 0 8px;
            border: 1px solid #e8eaec;
            border-radius: 3px
          }

          /*已验证邮箱*/

          .isCheck {
            background: #f6ffed;
            border-color: #b7eb8f !important;
            color: #52c41a !important;
          }

          .noCheck {
            background: #fff1f0;
            border-color: #ffa39e !important;
            color: #f5222d !important;
          }

          & > p {
            span {
              margin: 2px 4px 2px 0;
              padding: 0 8px;
              border: 1px solid #e8eaec;
              border-radius: 3px
            }

            .ordinary {
              background: #e6f7ff;
              border-color: #91d5ff !important;
              color: #1890ff !important;
            }

            .admin {
              background: #f9f0ff;
              border-color: #d3adf7 !important;
              color: #722ed1 !important;
            }

            .super {
              background: #fff2e8;
              border-color: #ffbb96 !important;
              color: #fa541c !important;
            }

            .test {
              background: #ffdff5;
              border-color: #fcc3f5 !important;
              color: #c449b8 !important;
            }
          }

          button {
            margin-left: 16px;
          }
        }

        & > div:nth-child(4) {
          margin-top: 8px;

          button {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
